<template>
	<view class="login">
		<page-top title="登录">
		</page-top>
		<view class="top">
			<view class="top-icon">
				<u-icon @click="iconPopupOpen" color="#3c9cff" size="30px" name="setting"></u-icon>
			</view>
		</view>
		<view class="body">
			<view class="body-form">
				<u--form labelPosition="left" :model="loginObj" :rules="rules" ref="uForm">
					<u-form-item label="账号" prop="username" borderBottom ref="item1">
						<u--input v-model="loginObj.username" border="none"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom ref="item1">
						<u--input v-model="loginObj.password" type="password" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="body-button">
				<u-button type="primary" @click="submit">登录</u-button>
			</view>
		</view>
		<u-popup :mask-custom-style="{top:'var(--status-bar-height)'}" :closeOnClickOverlay="false" :closeable="true" :safeAreaInsetTop="true" mode="top" :show="show"
			@close="popupClose" @open="popupOpen">
			<view class="top-popup">
				<view class="top-popup-content">
					<u--text type="info" text="服务器地址"></u--text>
					<view><u-input v-model="serveUrl" border="bottom" placeholder="地址"><u--text text="http://"
								slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
						</u-input></view>
					<u-button class="top-popup-content-bottom" type="primary" shape="circle"
						@click="serveUrlEv">确认</u-button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>



<script>
	import pageTop from '@/components/pageTop.vue';

	import {
		LoginApiPost
	} from '@/common/api/login.js';
	export default {
		components: {
			pageTop: pageTop
		},
		data() {
			return {
				value: 123,
				loginObj: {
					username: '',
					password: ''
				},
				rules: {
					username: {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					}
				},
				show: false,
				serveUrl: '',
			}
		},
		onLoad(e) {
			let getStorageLoginData = uni.getStorageSync('loginData')
			if (getStorageLoginData) {
				this.loginObj = JSON.parse(getStorageLoginData)
			}

		},
		methods: {
			
			// 登录
			async submit() {
				// let arr_data = await LoginApiPost()
				let uForm = await this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					return true
				}).catch(errors => {
					uni.showModal({
						content: '校验失败请输入账号跟密码',
						showCancel: false
					});
				})
				if (uForm == true) {
					let serveUrl = uni.getStorageSync('serveUrl');
					if (serveUrl == '') {
						uni.showModal({
							content: '请配置服务器地址',
							showCancel: false
						});
						return
					}
					try {
						uni.showLoading({
							title: '登录中请稍等',
							mask:true
						});
						let arr_data = await LoginApiPost(this.loginObj)
						uni.hideLoading();
						if (arr_data.statusCode == 202) {
							uni.showModal({
								content: arr_data.data.msg,
								showCancel: false
							});

							return
						}
						if (arr_data.statusCode !== 201) {

							uni.showModal({
								content: '登录失败',
								showCancel: false
							});
							return
						}
						// console.log((arr_data.data))
						uni.setStorageSync('token', arr_data.data.token);
						uni.setStorageSync('user_id', arr_data.data.userId);
						uni.setStorageSync('username', arr_data.data.username);
						uni.setStorageSync('dep', arr_data.data.dep);
						uni.setStorageSync('broadcastName', arr_data.data.broadcastName);
						uni.setStorageSync('broadcastactionName', arr_data.data.broadcastactionName);
						uni.setStorageSync('loginData', JSON.stringify(this.loginObj));
						uni.setStorageSync('printfacility', arr_data.data.printfacility);
						uni.switchTab({
							url: '/pages/index/index'
						});
					} catch (e) {
						console.log(e)
						uni.hideLoading();
						//TODO handle the exception
						uni.showModal({
							content: '登录接口请求请联系管理员' + 'http://' + uni.getStorageSync('serveUrl'),
							showCancel: false
						});
					}
				}

			},
			popupOpen() {
				if (uni.getStorageSync('serveUrl')=='') {
					uni.setStorageSync('serveUrl', this.serveUrl)
				}
				this.serveUrl = uni.getStorageSync('serveUrl');
				this.show = true
			},
			popupClose() {
				this.show = false
			},
			iconPopupOpen() {
				this.show = true
			},
			serveUrlEv() {
				try {
					uni.setStorageSync('serveUrl', this.serveUrl);
				} catch (e) {
					// error
					uni.showModal({
						content: '服务器地址配置失败',
						showCancel: false
					});
				}
				this.show = false
			},

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss">

	.login {
		height: 100%;

		.top {
			height: 50rpx;
			padding: 10rpx;
			position: relative;

			.top-icon {
				position: absolute;
				right: 10rpx;
				top: calc(var(--status-bar-height) + 5rpx);
			}
		}

		.body {
			padding-top: 50rpx;
			box-sizing: border-box;
			padding-left: 10rpx;
			padding-right: 10rpx;

			.body-button {
				margin-top: 20rpx;
			}
		}
	}

	.top-popup {
		// height: 200rpx;
		padding: 20rpx;
		padding-top: 30rpx;
		// display: flex;
		// align-items: center;
		// width: 100%;
		// background-color: red;
		margin: auto, auto;

		.top-popup-content {

			// width: 100%;
			// background-color: pink;
			.top-popup-content-bottom {
				margin-top: 10rpx;
			}
		}
	}

	.notify-class {
		position: relative;
	}

	.notify-class-icon {
		position: absolute;
		top: 0rpx;
		right: 15rpx;

	}

	.notify-class-icon:active {
		background-color: var(--common-active);
	}
</style>